<template>
  <q-layout class="hHh lpR fFf">
    <tool-header title="工具编辑记录">
      <tool-tag-chip-group v-model="query.tags"></tool-tag-chip-group>
      <q-input dense outlined v-model="query.keywords" style="min-width: 60px"
               @keydown.enter="initList()"
               input-class="text-right" class="q-ml-md">
        <template v-slot:append>
          <q-icon v-if="query.keywords === ''" name="search"/>
          <q-icon v-else name="clear" class="cursor-pointer" @click="query.keywords = ''"/>
        </template>
      </q-input>
      <q-option-group
          name="preferred_genre"
          v-model="query.status"
          :options="options"
          color="primary" type="checkbox" inline @input="initList()"
      />
    </tool-header>
    <!--工具表格-->
    <q-page-container>
      <q-table
          :data="data"
          :columns="columns"
          :table-colspan="pageSize"
          row-key="_id"
          separator="cell"
          :pagination.sync="pagination"
          hide-bottom
          hide-pagination
          :loading="isLoading"
      >
        <template v-slot:body-cell-icon="props">
          <q-td :props="props">
            <tool-icon :src="props.row.data.icon" :background="props.row.data.background"></tool-icon>
          </q-td>
        </template>
        <template v-slot:body-cell-name="props">
          <q-td :props="props">
            <div class="ellipsis-3-lines" style="max-width: 380px;">
              <strong>{{ props.row.data.name }}</strong>
              <p style="white-space:pre-wrap; word-wrap:break-word">{{ props.row.data.description }}</p>
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-permalink="props">
          <q-td :props="props">
            <div class="ellipsis" style="width: 180px;">
              <a :href="props.row.data.permalink" target="_blank">{{ props.row.data.permalink }}</a>
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-tags="props">
          <q-td :props="props">
            <tool-tag-chip v-for="tag in props.row.data.tags" :key="tag._id" :tag="tag">
            </tool-tag-chip>
          </q-td>
        </template>
        <template v-slot:body-cell-time="props">
          <q-td :props="props">
            <q-chip square dense v-if="props.row.status">
              <q-avatar style="width: 32px" color="primary" text-color="white">状态</q-avatar>
              <span>{{ props.row.status }}</span>
            </q-chip>
            <div class="full-width"></div>
            <q-chip square dense v-if="props.row.ctime">
              <q-avatar style="width: 32px" color="primary" text-color="white">创建</q-avatar>
              <span>{{ props.row.ctime | dateFormat }}</span>
            </q-chip>
            <div class="full-width"></div>
            <q-chip square dense v-if="props.row.utime">
              <q-avatar style="width: 32px" color="primary" text-color="white">更新</q-avatar>
              <span>{{ props.row.utime | dateFormat }}</span>
            </q-chip>
            <div class="full-width"></div>
            <q-chip square dense v-if="props.row.rtime">
              <q-avatar style="width: 32px" color="primary" text-color="white">通过</q-avatar>
              <span>{{ props.row.rtime | dateFormat }}</span>
            </q-chip>
          </q-td>
        </template>
        <template v-slot:body-cell-status="props">
          <q-td :props="props">
            <q-toggle
                v-model="props.row.data.isPublish"
                checked-icon="check"
                color="green"
                unchecked-icon="clear"
                @input="handleStatusChange(props.row.data)"
            />
          </q-td>
        </template>
        <template v-slot:body-cell-opt="props">
          <q-td :props="props">
            <div class="full-width"></div>
            <q-btn class="q-ma-sm" label="查看数据">
              <q-popup-proxy>
                <q-card class="q-pa-md"
                        style="width: 600px;height: auto">
                  <q-card-section>
                    <div class="text-h6">原始数据</div>
                  </q-card-section>
                  <q-separator inset="6"/>
                  <q-card-section>
                    <json-view :data="props.row"/>
                  </q-card-section>
                </q-card>
              </q-popup-proxy>
            </q-btn>
            <q-btn v-if="props.row.status ==='待审核'" class="q-ma-sm" @click="handleClick(props.row)"
                   color="primary">审核
            </q-btn>
            <q-btn v-if="props.row.status ==='审核中'" class="q-ma-sm" @click="handleClick(props.row)"
                   color="amber">继续审核
            </q-btn>
            <q-btn v-if="props.row.status ==='已通过' || props.row.status ==='未通过'" class="q-ma-sm"
                   @click="handleClick(props.row)"
                   color="green">查看
            </q-btn>
          </q-td>
        </template>
      </q-table>
    </q-page-container>
    <section class="q-pa-lg flex flex-center">
      <q-pagination
          v-model="pageNo"
          :max="Math.ceil(total/pageSize)"
          :max-pages="6"
          @input="handlePageChange"
      />
    </section>
    <!--工具编辑弹窗-->
    <q-dialog v-model="dialogVisible" title="工具配置">
      <q-card style="width: 800px">
        <q-card-section>
          <div class="text-h6">工具编辑</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          <q-input class="q-mb-sm" v-model="formData.name" filled label="名称"/>
          <q-input class="q-mb-sm" v-model="formData.permalink" filled label="链接"/>
          <q-input class="q-mb-sm" v-model="formData.description" filled type="textarea" label="描述"/>
          <div class="q-mt-sm">
            <icon-upload v-model="imageUrl"></icon-upload>
          </div>
          <div class="q-mt-sm">
            <div class="text-subtitle1">关联标签</div>
            <tool-tag-chip-group v-model="formData.tags"></tool-tag-chip-group>
          </div>
        </q-card-section>
        <q-card-actions align="right">
          <q-btn @click="dialogVisible = false">取 消</q-btn>
          <q-btn v-if="formStatus==='审核中' || formStatus==='待审核'" @click="reject()" :loading="isLoading">审 核 打
            回
          </q-btn>
          <q-btn v-if="formStatus==='审核中' || formStatus==='待审核'" @click="submit()" :loading="isLoading">审 核 通
            过
          </q-btn>
        </q-card-actions>
      </q-card>
    </q-dialog>
  </q-layout>
</template>

<script>

import iTool from '../../api/tool'
import iToolEdit from '../../api/toolEdit'
import { cloneDeep } from 'lodash'
import ToolTagChip from 'components/ToolTagChip'
import ToolHeader from 'pages/ToolMangement/components/ToolHeader'
import ToolTagChipGroup from 'components/ToolTagChipGroup'
import IconUpload from 'components/IconUpload'
import ToolIcon from 'components/ToolIcon'

export default {
  name: 'ToolReview',
  components: {
    ToolTagChip,
    ToolHeader,
    ToolTagChipGroup,
    IconUpload,
    ToolIcon
  },
  data () {
    return {
      dialogVisible: false,
      formData: {},
      formStatus: '',
      isLoading: false,
      pageNo: 1,
      pageSize: 10,
      total: 10,
      imageUrl: '',
      pagination: {
        page: 1,
        rowsPerPage: 0
      },
      data: [],
      columns: [
        { name: 'icon', label: '图标', align: 'left' },
        { name: 'name', label: '名称', sortable: true, align: 'left' },
        {
          name: 'permalink',
          label: '链接',
          align: 'left',
          style: 'white-space:pre-wrap; word-wrap:break-word'
        },
        {
          name: 'tags',
          label: '标签',
          align: 'left',
          style: 'white-space:pre-wrap; word-wrap:break-word'
        },
        { name: 'time', label: '编辑记录信息', align: 'left' },
        { name: 'status', label: '发布状态', align: 'left' },
        { name: 'opt', label: '操作', align: 'middle' }
      ],
      query: {
        tags: [],
        status: ['committed', 'reviewing', 'finished', 'rejected'],
        keywords: ''
      },
      // 'committed', 'reviewing', 'finished', 'rejected'
      options: [
        {
          label: '待审核',
          value: 'committed'
        },
        {
          label: '审核中',
          value: 'reviewing'
        },
        {
          label: '已通过',
          value: 'finished'
        },
        {
          label: '未通过',
          value: 'rejected'
        }
      ]
    }
  },
  async activated () {
    await this.initList()
  },
  async mounted () {
    await this.initList()
  },
  watch: {
    'query.tags' () {
      this.initList()
    }
  },
  methods: {
    async initList () {
      this.isLoading = true
      const { rows, total } = await iToolEdit.getWorkflowByPages.get({
        status: this.query.status,
        offset: (this.pageNo - 1) * this.pageSize,
        limit: this.pageSize,
        keywords: this.query.keywords,
        tags: this.query.tags.map(e => e._id)
      }, {
        pathParams: {
          editType: 'review'
        }
      })

      this.data = rows.map(e => {
        e.data.isPublish = !!e.status
        // e.versionInfo = {
        //     ctime: e.ctime,
        //     utime: e.utime,
        //     rtime: e.rtime,
        //     status: e.status,
        //     editorId: e.editorId,
        //     editType: e.editType,
        // };
        return e
      })
      this.total = total
      this.isLoading = false
    },
    async handleClick (row) {
      this.dialogVisible = true
      this.versionId = row._id
      this.formData = cloneDeep(row.data || {
        icon: '',
        tags: []
      })
      this.imageUrl = this.formData.icon
      this.formStatus = row.status
      // 标记审核中状态
      if (row.status === '待审核') {
        await iToolEdit.updateWorkflowStatus.put({
          operation: 'review'
        }, {
          pathParams: {
            id: this.versionId
          }
        })
        await this.initList()
      }
    },
    async submit () {
      this.isLoading = true
      try {
        const tool = cloneDeep(this.formData)
        tool.icon = this.imageUrl || tool.icon
        tool.tags = tool.tags.map(e => e._id)
        await iToolEdit.updateWorkflowStatus.put({
          operation: 'pass'
        }, {
          pathParams: {
            id: this.versionId
          }
        })
        this.dialogVisible = false
        this.imageUrl = ''
        await this.initList()
      } finally {
        this.isLoading = false
      }
    },
    async reject () {
      this.isLoading = true
      this.$q.dialog({
        title: '审核打回',
        message: '审核不通过需要填写原因',
        prompt: {
          model: '',
          type: 'text' // optional
        },
        cancel: true,
        persistent: true
      }).onOk(async (data) => {
        try {
          const tool = cloneDeep(this.formData)
          tool.icon = this.imageUrl || tool.icon
          tool.tags = tool.tags.map(e => e._id)
          await iToolEdit.updateWorkflowStatus.put({
            operation: 'reject',
            reviewerComment: data
          }, {
            pathParams: {
              id: this.versionId
            }
          })
          this.dialogVisible = false
          this.imageUrl = ''
          await this.initList()
        } finally {
          this.isLoading = false
        }
      })
    },
    handlePageChange (pageNo) {
      this.pageNo = pageNo
      this.initList()
    },
    async handleStatusChange (tool) {
      await iTool.updateStatus({
        id: tool._id,
        status: tool.isPublish ? 1 : 0
      })
    }
  }
}
</script>

<style lang="scss">
.layout-header {
  position: relative;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #1daef8;
  box-shadow: 0 0 4px #ccc;

  .layout-header-content {
    height: 60px;
    margin: 0 auto;
  }

  .layout-header-title {
    position: absolute;
    top: 0;
    left: 50%;
    width: 300px;
    height: 60px;
    margin-left: -150px;
    font-size: 18px;
    font-weight: 500;
    line-height: 60px;
    color: #fff;
    text-align: center;
  }
}

// 工具栏
.toolbar {
  background: #f5f7fa;
  border-radius: 4px;
  padding: 10px;

  &::after {
    display: table;
    content: '';
    clear: both;
  }
}
</style>
